<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <el-button type="primary" @click="visible = true">
    <el-icon class="mr-1">
      <ChatDotRound />
    </el-icon>
    问题反馈
  </el-button>

  <div
    class="fixed inset-0 flex items-center justify-center z-50"
    v-if="visible"
  >
    <!-- 遮罩层 -->
    <div
      class="absolute inset-0 bg-black bg-opacity-50"
      @click="handleClose"
    ></div>
    <!-- 弹窗主体 -->
    <div class="bg-white rounded-lg w-[500px] relative z-10">
      <!-- 标题区域 -->
      <div
        class="flex justify-between items-center px-6 py-4 border-b border-gray-200"
      >
        <h3 class="text-xl font-medium">问题反馈</h3>
        <el-icon
          class="cursor-pointer text-gray-400 hover:text-gray-600"
          @click="handleClose"
        >
          <Close />
        </el-icon>
      </div>
      <!-- 内容区域 -->
      <div class="px-6 py-4">
        <el-form ref="formRef" :model="form" :rules="rules">
          <el-form-item prop="info">
            <el-input
              v-model="form.info"
              type="textarea"
              :rows="6"
              :maxlength="500"
              placeholder="请详细描述您遇到的问题..."
              show-word-limit
              resize="none"
              class="w-full"
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮区域 -->
      <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end space-x-4">
        <el-button @click="handleClose" class="!rounded-button">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
          :loading="loading"
          class="!rounded-button"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Close, ChatDotRound } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { Message_, MessageControllerService } from "../../backendapi";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const visible = ref(false);
const loading = ref(false);
const formRef = ref<FormInstance>();
const form = reactive({
  info: "",
});
const rules: FormRules = {
  info: [
    { required: true, message: "请输入反馈内容", trigger: "blur" },
    { min: 10, message: "反馈内容不能少于10个字符", trigger: "blur" },
  ],
};
const handleClose = () => {
  visible.value = false;
  form.info = "";
  if (formRef.value) {
    formRef.value.resetFields();
  }
};
const handleSubmit = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    loading.value = true;
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1000));
    // 这里应该是实际的API调用
    const message: Message_ = {
      adminRes: "未答复",
      createTime: new Date().toISOString(),
      handleUser: "-1",
      info: form.info,
      updateTime: new Date().toISOString(),
      userName: store.state.user.loginUser.id,
    };
    const response = await MessageControllerService.saveUsingPost(message);
    ElMessage.success("反馈提交成功，感谢您的反馈！");
    handleClose();
  } catch (error) {
    ElMessage.error("提交失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};
// 暴露方法供父组件调用
defineExpose({
  show: () => {
    visible.value = true;
  },
});
</script>
<style scoped>
.el-textarea :deep(.el-textarea__inner) {
  resize: none;
  min-height: 120px;
}
.el-form-item :deep(.el-form-item__error) {
  padding-top: 4px;
}
</style>
